<template>
  <div class="main">
    <div class="content">
      <div class="content_form">
        <el-form ref="form" :model="form" label-width="140px" class="form_item" :rules="rules">
          <div class="left">
            <div class="left-warpper">
              <h2 class="titleH2">
                <span class="line">图文基本信息</span>
              </h2>
              <el-upload
                action="/api/upfile/newuploadFile"
                list-type="picture-card"
                :headers="token_token"
                :on-success="upload_success_modify"
                name="file"
                :on-preview="handlePictureCardPreview_modify"
                :on-remove="handleRemove_modify"
                :limit="1"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
          </div>
          <el-row class="right">
            <el-col>
              <el-form-item label="新闻标题" prop="title">
                <el-input v-model="form.title"></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="创建人(选填)" prop="author">
                <el-input v-model="form.author"></el-input>
              </el-form-item>
            </el-col>
			<!--资讯栏目-->
			<el-col>
				<el-form-item label="栏目" prop="title">
					<el-select v-model="form.columnId" placeholder="请选择">
					  <el-option
						v-for="item in options"
						:key="item.columnId"
						:label="item.columnName"
						:value="item.columnId">
					  </el-option>
					</el-select>
				 </el-form-item>
			</el-col>
			<!--资讯栏目-->
            <el-col>
              <el-form-item label="图片ID" prop="fileId" v-show="false">
                <el-input v-model="form.fileId"></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="图片是否显示" prop="showCoverPic">
				  <el-switch
				    v-model="form.showCoverPic"
				    active-text="是"
				    inactive-text="否"
				    :active-value="1"
				    :inactive-value="0"
				    
				    >
				  </el-switch>
                <!-- <el-input v-model="form.showCoverPic" placeholder="请填写true或者false"></el-input> -->
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="摘要" prop="digest">
                <el-input v-model="form.digest"></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="新闻详情" prop="content">
                <quill-editor
                  class="quill"
                  v-model="form.content"
                  ref="myQuillEditor"
                  :options="editorOption"
                  @blur="onEditorBlur($event)"
                  @focus="onEditorFocus($event)"
                  @change="onEditorChange($event)"
                ></quill-editor>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { getToken, setToken, removeToken } from '@/utils/auth';
import { addList,newsList} from '@/api/user';
import { quillEditor } from 'vue-quill-editor'; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
var token_one = sessionStorage.getItem('token');
// import uploadImg from '@/components/elUploadImg';
export default {
    components: {
        //  uploadImg,
        quillEditor
    },
    data() {
        return {
            id: '',
            engineering: '',
            engineeringTypeOption: [],
            editorOption: {},
            form: {
                title: '',
                author: '',
                content: '', //部门编号
                digest: '',
                fileId: '',
                showCoverPic: 1,
				columnId:''
                // token : gettoken()
            },
            token_token: { Authorization: token_one },
			options:[],
            rules: {
                password: [{ required: true, message: '请填写内容', trigger: 'blur' }]
            }
        };
    },
    created() {
        // var userList_data = { token: getToken() };
		/******栏目列表********/
		
			newsList()
			    .then(response => {
			        if (response.data.code == 200) {
			            console.log("==栏目==",response.data.data);
			            this.options = response.data.data;
			        } else {
			            this.$message.error(response.data.msg);
			        }
			    })
			    .catch(() => {
					
				});
			
	
		/*******栏目列表*******/
    },
    methods: {
        onEditorReady(editor) {
            // 准备编辑器
        },
        onEditorBlur() {}, // 失去焦点事件
        onEditorFocus() {}, // 获得焦点事件
        onEditorChange() {}, // 内容改变事件
        //图片上传
        handleRemove_modify(file) {
            console.log(file);
        },
        handlePictureCardPreview_modify(file) {
            this.dialogImageUrl = file.url;
            console.log('==我需要的数据==', file);
            this.dialogVisible = true;
        },
        /******上传图片成功*********/
        upload_success_modify(file) {
            console.log('===我是图片上传成功====', file);
            this.id = file.file_id;
        },
        // 保存
        addSave() {
            var params_one = {
				columnId:this.form.columnId,
                articleList: [
                    {
                        title: this.form.title,
                        author: this.form.author,
                        content: this.form.content,
                        digest: this.form.digest,
                        showCoverPic: this.form.showCoverPic,
                        fileId: this.id,
						
                    }
                ]
            };
		
            console.log('====' + params_one);
            addList(params_one)
                .then(response => {
                    this.$emit('closeModal', false);
                })
                .catch(() => {
                    // this.loading = false
                    // this.$message.error(response.data.msg)
                });
        }
    }

};
</script>
<style scoped>
.left {
    width: 4rem;
    text-align: center;
    padding-right: 0.2rem;
    position: absolute;
    overflow: hidden;
    overflow-y: auto;
    /* height: 100%; */
    background: #fff;
}

.left-warpper p {
    text-align: left;
}
.el-button {
    width: 60%;
}
.right {
    padding: 0.1rem 0.2rem 0;
    box-sizing: border-box;
    margin-left: 4rem;
    overflow: hidden;
}

.el-form-item {
    margin-bottom: 0.2rem;
}
.el-form-item__label {
    float: none;
}
.el-form-item__content {
    margin-left: 0 !important;
}
.el-upload {
    width: 100%;
}
</style>